<template>
  <div class="main">
    <div class="safe-info-box">
      <div class="info-box">
        <div class="myorder-account">
          <h3>账户安全</h3>
        </div>
        <div class="safeLevel-box">
          <div class="boxLeft">
            <span>账号安全等级</span>
            <el-progress
              type="circle"
              :percentage="safeLevel"
              stroke-width="20"
              style="height: 100px; width: 100px"
            />
          </div>
          <div class="boxRight">
            <span @click="loginOut">退出登录</span>
          </div>
        </div>
        <div class="safeList-box">
          <div class="listItem">
            <div class="safeList" v-for="item in safeList" :key="item">
              <div class="aready" v-if="item.isFinsh === 'Y'">
                <i class="iconfont icon-yiwancheng1"></i>
              </div>
              <i :class="item.iconClass"></i>
              <span>{{ item.boxText }}</span>
              <p>{{ item.introduceText }}</p>
              <el-button type="primary" @click="btnEvent(item.id)">{{
                item.btnText
              }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改密码弹出 -->
    <el-dialog
      v-model="forgetPwdDialogVisible"
      title="修改密码"
      width="30%"
      :before-close="handleClose"
    >
      <div class="forgetPwdForm">
        <el-form
          ref="updatePwdFormRef"
          :model="updatePwdForm"
          :rules="updatePwdrFormRules"
          class="demo-ruleForm"
          :size="formSize"
        >
          <el-form-item prop="password">
            <el-input
              v-model="updatePwdForm.password"
              placeholder="输入新密码"
              clearable
              type="password"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input
              v-model="updatePwdForm.checkPass"
              placeholder="再次输入密码"
              clearable
              type="password"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="updatePwdForm.code"
              placeholder="邮箱验证码"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="countDown" :disabled="canClick">{{
            context
          }}</el-button>
          <el-button type="primary" @click="updataPassword">修改密码</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改手机号 -->
    <el-dialog
      v-model="phoneDialogVisible"
      title="修改手机号"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        v-model="updatePhone"
        placeholder="请输入要新的的手机号"
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updataPhone">修改手机号</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="payPwdDialogVisible"
      title="设置支付密码"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        v-model="payPwd"
        placeholder="输入支付密码"
        type="password"
        show-password
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="setPayPassword">设置</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { reg_pwd } from "@/assets/js/regex";
import { postCode, resetPassword, updateUserInfo } from "@/api/user";
import avaterImg from "../../../assets/image/avaterDemo.jpg";
import { getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    let checkPwd2 = (registerFormRules, value, callback) => {
      if (value.trim().length == 0) {
        callback(new Error("密码不能为空"));
      } else if (value != this.updatePwdForm.password) {
        callback(new Error("2次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      context: "获取验证码",
      totalTime: 60,
      canClick: false,
      forgetPwdDialogVisible: false,
      phoneDialogVisible: false,
      payPwdDialogVisible: false,
      circleUrl: avaterImg,
      updatePwdForm: {
        email: "",
        password: "",
        checkPass: "",
        code: "",
      },
      safeList: [
        {
          id: 1,
          iconClass: "iconfont icon-biangengshoujihao safeIconStyle",
          boxText: "手机号",
          introduceText: "166****9420",
          btnText: "修改手机号",
          isFinsh: "Y",
        },
        {
          id: 2,
          iconClass: "iconfont icon-denglumima safeIconStyle",
          boxText: "登陆密码",
          introduceText: "定期更换密码有助于账号安全",
          btnText: "修改登录密码",
          isFinsh: "Y",
        },
        {
          id: 3,
          iconClass: "iconfont icon-zhifumima safeIconStyle",
          boxText: "支付密码",
          introduceText: "支付密码有效的保护你的资产",
          btnText: "设置支付密码",
          isFinsh: "N",
        },
        {
          id: 4,
          iconClass: "iconfont icon-youxiang safeIconStyle",
          boxText: "邮箱",
          introduceText: "设置邮箱有助于你的账号易用",
          btnText: "绑定邮箱",
          isFinsh: "Y",
        },
      ],
      userInfo: {},
      updatePwdrFormRules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱格式" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "change",
          },
          {
            pattern: reg_pwd,
            message: "密码需要同时使用数字与字母组合",
            trigger: "blur",
          },
        ],
        checkPass: [{ validator: checkPwd2, trigger: "blur" }],
        code: [{ required: true, message: "验证码为必填项", trigger: "blur" }],
      },
      updatePhone: "",
      payPwd: "",
    };
  },
  mounted() {
    this.init();
  },
  setup() {},
  methods: {
    init() {
      this.userInfo = this.$store.getters.getUserInfo;
      console.log(this.userInfo);
      this.safeList[0].introduceText = this.userInfo.phone;
    },
    // 修改登录密码
    updatePwd() {
      this.forgetPwdDialogVisible = true;
      this.updatePwdForm.email = this.userInfo.email;
    },
    updateNo() {
      this.phoneDialogVisible = true;
    },
    setPayPwd() {
      this.payPwdDialogVisible = true;
    },
    // 获取验证码按钮
    countDown() {
      this.postCode();
      this.canClick = true;
      this.context = this.totalTime + "秒后重选发送";
      const timer = setInterval(() => {
        this.totalTime--;
        this.context = this.totalTime + "秒后重新发送";
        if (this.totalTime < 0) {
          clearInterval(timer);
          this.context = "重新获取";
          this.totalTime = 60;
          this.canClick = false;
        }
      }, 1000);
    },
    // 获取验证码
    postCode() {
      let email = this.updatePwdForm.email;
      debugger;
      if (email !== "" && email && email !== "undefined") {
        postCode(email).then((res) => {
          console.log(res);
        });
      }
    },
    // 修改密码
    updataPassword() {
      let resetForm = {
        email: this.updatePwdForm.email,
        password: this.updatePwdForm.password,
        rePassword: this.updatePwdForm.checkPass,
        code: this.updatePwdForm.code,
      };
      resetPassword(resetForm).then((res) => {
        if (res.code === 0) {
          this.$message.success("修改成功");
        }
      });
    },
    updataPhone() {
      this.userInfo.phone = this.updatePhone;
      updateUserInfo(this.userInfo).then((res) => {
        if (res.code === 0) {
          this.$message.success("修改成功");
          window.location.reload();
        }
      });
    },
    setPayPassword() {
      if (this.payPwd) {
        this.$message.success("设置成功");
        this.payPwdDialogVisible = false;
        this.safeList[2].isFinsh = "Y";
      } else {
        this.$message.error("密码不能为空");
        return false;
      }
    },
    btnEvent(id) {
      if (id === 1) {
        this.updateNo();
      } else if (id === 2) {
        this.updatePwd();
      } else if (id === 3) {
        this.setPayPwd();
      }
    },
    loginOut() {
      removeToken();
      this.$router.push("/login");
    },
  },
  computed: {
    safeLevel() {
      let level = 0;
      this.safeList.forEach((item) => {
        if (item.isFinsh === "Y") {
          level += 25;
        }
      });
      return level;
    },
  },
};
</script>
<style lang="scss">
.main {
  position: relative;
  .safe-info-box {
    display: flex;
    justify-content: center;
    height: 100%;
    margin-bottom: 180px;
    .info-box {
      width: 1200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .myorder-account {
        margin: 20px 165px;
        padding: 0 30px;
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
      }
      .safeLevel-box {
        height: 140px;
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        .boxLeft {
          width: 360px;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            font-size: 20px;
            font-weight: 700;
            margin: 0 10px;
          }
          .el-progress {
            .el-progress-circle {
              height: 100px !important;
              width: 100px !important;
            }
          }
        }
        .boxRight {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          span {
            font-size: 20px;
            color: #244d24;
            width: 150px;
            display: flex;
            justify-content: flex-start;
            &:hover {
              color: #263b26;
              font-weight: bold;
              cursor: pointer;
            }
          }
        }
      }
      .safeList-box {
        display: flex;
        margin-top: 50px;
        flex-wrap: wrap;
        width: 100%;
        .listItem {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          justify-content: center;
          .safeList {
            position: relative;
            background-color: #fff;
            width: 270px;
            height: 360px;
            margin: 40px 30px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .aready {
              position: absolute;
              bottom: 109px;
              left: 10px;
              i {
                font-size: 50px;
                color: green;
                font-weight: 500;
              }
            }
            .safeIconStyle {
              color: #244d4d;
              font-size: 100px;
            }
            span {
              margin: 10px 0;
            }
            p {
              margin: 10px 0;
              font-size: 14px;
              color: #999;
            }
            .el-button {
              background-color: #fff;
              border: 1px solid #244d4d;
              color: #244d24;
              border-radius: 0;
              width: 200px;
              height: 40px;
              &:hover {
                background-color: #244d4d;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .el-dialog {
    .forgetPwdForm {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .el-form {
        .el-form-item {
          height: 40px;
          .el-input__wrapper {
            border: 0;
            border-radius: 0;
            width: 100%;
            border-bottom: 1px solid #244d4d;
            box-shadow: 0 0 0 0;
            color: #111;
            font: normal;
            font-family: "Courier New", Courier, monospace;
            text-transform: none;
          }
          .el-input-group__append {
            box-shadow: 0 0 0 0;
            background-color: #fff;
            padding: 0;
            .el-button {
              padding: 0;
              margin: 0;
              border-radius: 0;
              border-bottom: 1px solid #244d4d;
              background-color: #244d4d;
              color: #fff;
              width: 100px;
              font-size: 12px;
              height: 32px;
              cursor: pointer;
              &:hover {
                font-weight: 700;
              }
            }
          }
          .el-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background-color: #244d4d;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            height: 56px;
            border-radius: 30px;
          }
        }
      }
    }
    .el-dialog__footer {
      .dialog-footer {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
    }
    .el-button {
      padding: 0;
      border: 0;
      margin: 0;
      border-radius: 0;
      border-bottom: 1px solid #244d4d;
      background-color: #244d4d;
      color: #fff;
      width: 100px;
      font-size: 12px;
      height: 32px;
      cursor: pointer;
      &:hover {
        font-weight: 700;
      }
    }
  }
}
</style>
